﻿@page "/Numeric-TextBox/Custom-Format"

@using Syncfusion.Blazor.Inputs

@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample demonstrates the custom format functionalities of the Numeric TextBox. The value of Numeric TextBox will be displayed with defined custom format while typing a value or changing a value using up/down buttons in the input boxes.</p>
</SampleDescription>
<ActionDescription>
   <p>The NumericTextBox provides an option to customize the display format of the numeric value using the <a href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.NumericTextBoxModel-1.html#Syncfusion_Blazor_Inputs_NumericTextBoxModel_1_Format' target='_blank'> Format</a> property. It accepts the standard numeric format string and custom numeric format string as specified in <a target='_blank'href='https://docs.microsoft.com/en-us/dotnet/standard/base-types/standard-numeric-format-strings'>MSDN</a>. The formatted value displays when the component is not focused.</p>
   <p>In this demo, NumericTextBox control renders with the custom format ###.## km.</p>
   <p>More information about the NumericTextBox can be found in this<a target='_blank' href='https://blazor.syncfusion.com/documentation/numeric-textbox/formats/#custom-formats'>documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <div class="col-lg-12 control-section">
        <div class="content-wrapper">
            <div class="control-label">
                Enter the distance
            </div>
            <SfNumericTextBox TValue="double?" Value=250 Format="###.### km" Min=0></SfNumericTextBox>

            <div class="control-label">
                Enter the tax
            </div>
            <SfNumericTextBox TValue="double?" Format="### '%'" Value=25 Max=100 Min=0></SfNumericTextBox>

            <div class="control-label">
                Enter the amount
            </div>
            <SfNumericTextBox TValue="double?" Format="$ ###.##" Value=1025 Min=0></SfNumericTextBox>
        </div>
    </div>
</div>

<style>
    .content-wrapper {
        width: 35%;
        margin: 0 auto;
        min-width: 185px;
    }

    .e-float-input.e-numeric.e-input-group {
        margin-top: 40px;
    }

    .control-label {
        padding: 24px 0px 10px 0px;
        font-size: 12px;
    }
</style>